<template>
<aside :class="getCollapse?'menu-collapsed':'menu-expanded'">
    <!--导航菜单-->
    <el-menu :default-active="$route.path" class="el-menu-vertical-demo el-menu expanded" @open="handleopen" @close="handleclose" @select="handleselect" unique-opened router v-show="!getCollapse">
        <!-- 第一级 -->
        <template v-for="(item,index) in activeRouters">

            <el-submenu :index="index+''" v-if="!item.leaf" v-bind:key="index">
                <template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>

                <template v-for="(child,childIndex) in loadChildren(item.children)" :index="child.path">
                    <template v-if="child.children == null ">
                        <el-menu-item :index="child.path" :key="child.path">{{child.name}}</el-menu-item>
                    </template>
                    <template v-if="child.children != null ">
                        <el-submenu :index="index+'-' +childIndex" v-bind:key="child.path">
                            <template slot="title"><i :key="child.path" :class="child.iconCls"></i>{{child.name}}</template>
                            <el-menu-item v-for="cChild in loadChildren(child.children)" :index="cChild.path" :key="cChild.path"> - {{cChild.name}}</el-menu-item>
                        </el-submenu>
                    </template>

                </template>

            </el-submenu>
        </template>
    </el-menu>

    <!--导航菜单-折叠后-->
    <ul class="el-menu el-menu-vertical-demo collapsed" v-show="getCollapse" ref="menuCollapsed">
        <li v-bind:key="index" v-for="(item,index) in activeRouters" class="el-submenu item">
            <template v-if="!item.leaf">
                <div class="el-submenu__title" style="padding-left: 20px;" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)">
                    <i :class="item.iconCls"></i>
                </div>
                <ul class="el-menu submenu" :class="'submenu-hook-'+index" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)">
                    <template v-for="(child, childIndex) in loadChildren(item.children)">
                        <template v-if="child.children == null">
                            <li :key="child.path" class="el-menu-item" style="padding-left: 40px;padding-right:0px" :class="$route.path==child.path?'is-active':''" @click="$router.push(child.path)">{{child.name}}
                            </li>
                        </template>
                        <template v-if="child.children != null">
                            <li :key="child.path" style="padding-left: 40px;" class="el-menu-item" @mouseover="showMenu(index + '-' + childIndex,true)" @mouseout="showMenu(index + '-' + childIndex,false)">{{child.name}} </li>

                            <ul :key="child.path + 'ul'" class="el-menu submenu" :class="'submenu-hook-'+index + '-' + childIndex" :style="'left: 200px;' + 'top:' + childIndex * 50 + 'px'" @mouseover="showMenu(index + '-' + childIndex,true)" @mouseout="showMenu(index + '-' + childIndex,false)">
                                <li v-for="cChild in loadChildren(child.children)" :key="cChild.path" class="el-menu-item" style="padding-left: 40px;" :class="$route.path==cChild.path?'is-active':''" @click="$router.push(cChild.path)">{{cChild.name}}
                                </li>
                            </ul>
                        </template>
                    </template>
                </ul>
            </template>
        </li>
    </ul>
</aside>
</template>

<script>
import {
    mapGetters
} from 'vuex'
import {
    mapActions
} from 'vuex'

export default {
    computed: {
        activeRouters: function () {
            return this.$router.options.routes.filter(function (item) {
                return !item.hidden;
            });
        },
        ...mapGetters('moduleA', [
            'getCollapse'
        ])
    },
    methods: {
        loadChildren: (data) => {
            return data.filter(function (item) {
                let userType = localStorage.getItem("userType");
                if (localStorage.getItem("userType") == '3' && localStorage.getItem("userStatus") == '0') {
                    return false;
                }
                return item.userType && item.userType.indexOf(userType) > -1;
            })
        },
        showMenu(i, status) {
            this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-' + i)[0].style.display = status ? 'block' :
                'none';
        },
        handleopen() {
            console.log('handleopen');
        },
        handleclose() {
            console.log('handleclose');
        },
        handleselect: function (a, b) {},
        ...mapActions('moduleA', [
            'collapse',
        ])
    },
}
</script>

<style lang="scss">
aside {
    flex: 0 0 230px;
    width: 230px;

    .el-menu {
        height: 100%;
    }

    .expanded {
        width: 230px;
    }

    .collapsed {
        width: 60px;

        .item {
            position: relative;
        }

        .submenu {
            position: absolute;
            top: 0px;
            left: 60px;
            z-index: 99999;
            height: auto;
            display: none;
        }

    }
}

.menu-collapsed {
    flex: 0 0 60px;
    width: 60px;
}

.menu-expanded {
    flex: 0 0 230px;
    width: 230px;
}

.content-container {
    // background: #f1f2f7;
    flex: 1;
    // position: absolute;
    // right: 0px;
    // top: 0px;
    // bottom: 0px;
    // left: 230px;
    overflow-y: scroll;
    padding: 20px;

    .breadcrumb-container {

        //margin-bottom: 15px;
        .title {
            width: 200px;
            float: left;
            color: #475669;
        }

        .breadcrumb-inner {
            float: right;
        }
    }

    .content-wrapper {
        background-color: #fff;
        box-sizing: border-box;
    }
}
</style>
